<template>
  <div class="content">
	  
   
   
   <van-form @submit="onSubmit">
	   <!-- <van-nav-bar
	     title="标题"
	     left-text="返回"
	     right-text="按钮"
	     left-arrow
	     @click-left="onClickLeft"
	     @click-right="onClickRight"
	   /> -->
	   <nav class="login_l" v-if="isshow">
		   <div class="login">
		   	   <img src="../assets/img/touxiang.jpg" />
		   </div>
		   <van-field
		     v-model="username"
		     name="用户名"
		     label="用户名"
		     placeholder="请输入用户账号"
		   />
		   <van-field
		     v-model="password"
		     type="password"
		     name="密码"
		     label="密码"
		     placeholder="请输入用户密码"
		   />
	   </nav>
	   
	   <nav class="login_l" v-else="isshow">
		   <div class="login">
			   <img src="../assets/img/touxiang2.jpg" />
		   </div>
	   		   <van-field
	   		     v-model="username"
	   		     name="用户名"
	   		     label="用户名"
	   		     placeholder="请输入用户邮箱"
	   		   />
	   		   <van-field
	   		     v-model="password"
	   		     type="password"
	   		     name="密码"
	   		     label="密码"
	   		     placeholder="请输入用户密码"
	   		   />
	   </nav>
	   
    
	 
	 
	 <div class="box">
		 <button class="msg" @click="changelogin">{{mess}}</button>
		 <button class="reg" @click="tologin">点击免费注册</button>
	 </div>
	 
	 
     <div style="margin: 16px;">
       <van-button round block type="info" native-type="submit" style='background: #ff5000;border: none;margin-top: 20px;'>提交</van-button>
     </div>
   </van-form>

  </div>
</template>

<script>
	// import axios from 'axios'
	import { Dialog } from 'vant';
 export default {
	 
     name:'login',
     data(){
       return {
		  isshow:true,
         username:'',
         password:'',
         mess:'点击切换登录方式'
       }
     },
     methods:{
		 changelogin(){
			 this.isshow=!this.isshow
		 },
		 tologin(){
			this.$router.push('/reg')
		 },
        onSubmit(values) {
             console.log('submit', values);
           },
		   
		   
		   // 业务
		onSubmit(values) {
		     // console.log('submit', values);
			 let formData = new FormData();
			 formData.append('username',this.username);
			 formData.append('password',this.password);
			 
			 
			 this.$axios.post(
			 '/login',
			 formData,
			 {headers:{"Content-Type":"multipart/form-data"}}
			 ).then(
			 
			 res=>{
				 console.log('login页面打印的登录信息:',res)
				 
				 if(res.data.err==0){
				 	// 弹出框显示
					// 种token
					window.localStorage.setItem('user',JSON.stringify(res.data))
					// 判断之前在哪个页面,登录之后继续回到这个页面
				 	 if(this.$route.query.p){
				 	     this.$router.push(this.$route.query.p)
				 	  }else{
				 	      this.$router.push('/user')
				 	        }
				 }else{
					 Dialog.confirm({
					   title: '登录失败,用户名或者密码错误',
					   message: '是否跳转到注册页面@~@',
					 })
					   .then(() => {
					 	  console.log(111);
					 	this.$router.push('/reg')
					   })
					   .catch(() => {
					     // on cancel
					 	console.log(222)
					   });
				 }
				 
				 
				 }
			 
			 )
			 
			 
		  }
		  
		  
		  
		  
		  
		  
		  
		  
		  
		   
		},
		
		
		
		
		
   }
</script>


<style scoped>
	.content{
		background-image: url(../assets/img/background_01.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		height: 400px;
		padding-top: 115px;
		}
		
.login_l{margin-top: 20px;}
.login{height: 80px;width: 100%;text-align: center;margin-top: 30px;margin-bottom: 0px;}
.login img{width: 80px; height: 80px; margin-top: -50px;}
.box{width: 100%;height: 30px;margin-top: 25px;}
.msg{font-size: 10px;color: #FFFFFF;margin-left: 15px;float: left;line-height: 30px;border: none;background-color: #ff5000;border-radius: 15px;}
.reg{font-size: 10px;color: #FFFFFF;margin-right: 15px;float: right;line-height: 30px;border: none;background-color: #ff5000;border-radius: 15px;}
/* .reg{font-size: 14px;color: #555;margin-right: 15px;float: right;line-height: 30px;} */

.van-cell {background: rgba(0,0,0,0);}
</style>




<!-- :rules="[{ required: true, message: '请填写密码' }]" -->